.btn {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 60px 50px 0;
    width: 150px;
    height: 60px;
    line-height: 58px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
}

// demo1
.demo1 {
    border: 1px solid #03a9f3;
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        transition: 0.4s;
        /* background: rgba(255, 204, 0, 0.6); */
    }
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid #03a9f3;
        border-left: 1px solid #03a9f3;
    }
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid #03a9f3;
        border-right: 1px solid #03a9f3;
    }

    &:hover::before,
    &:hover::after {
        width: calc(100% + 10px);
        height: calc(100% + 10px);
    }
}

// demo2
.demo2 {
    border: 1px solid #03a9f3;
    &::before,
    &::after {
        position: absolute;
        content: "";
        border: 1px solid transparent;
        width: 0;
        height: 0;
    }
    &::before {
        top: -5px;
        left: -5px;
        /* background: rgba(255, 204, 0, 0.6); */
    }
    &::after {
        bottom: -5px;
        right: -5px;
    }

    &:hover::before,
    &:hover::after {
        width: calc(100% + 10px);
        height: calc(100% + 10px);
    }

    &:hover::before {
        border-top-color: #03a9f3;
        border-right-color: #03a9f3;
        transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
    }

    &:hover::after {
        border-bottom-color: #03a9f3;
        border-left-color: #03a9f3;
        transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s,
            height 0.2s ease-out 0.6s;
    }
}

// demo3
.demo3 {
    line-height: 52px;
    border: 4px solid rgba(254, 215, 4, 0.3);
    border-radius: 8px;
    &::before {
        content: "";
        position: absolute;
        top: -4px;
        left: -4px;
        width: 150px;
        height: 60px;
        border: 4px solid transparent;
        border-radius: 8px;
        animation: clippath 3s infinite linear;
        animation-play-state: paused;
        z-index: 0;
        /* background: rgba(255, 204, 0, 0.6); */
    }
    &:hover::before {
        border-color: rgb(254, 215, 4);
        animation-play-state: running;
    }
    @keyframes clippath {
        0%, 100% {
            clip-path: inset(0 0 95% 0);
        }
        25% {
            clip-path: inset(0 0 0 95%);
        }
        50% {
            clip-path: inset(95% 0 0 0);
        }
        75% {
            clip-path: inset(0 95% 0 0);
        }
    }
}

// demo4
.demo4 {
	border-radius: 8px;
	overflow: hidden;
    &::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: calc(50% - 100px);
        top: calc(50%  - 100px);
        width: 200px;
        height: 200px;
        background-color: #666666;
        background-repeat: no-repeat;
        background-position: 0 0;
        animation: rotate4 2s linear infinite paused;
    }
    &:hover::before {
        background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
        animation-play-state: running;
    }
    @keyframes rotate4 {
        100% {
            transform: rotate(1turn);
        }
    }
    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 4px;
        right: 4px;
        top: 4px;
        bottom: 4px;
        background: #fff;
        border-radius: 6px;
    }
}

// demo5
.demo5 {
    overflow: hidden;
    border-radius: 8px;
    &::after {
        content: '';
        position: absolute;
        left: calc(50% - 100px);
        top: calc(50%  - 100px);
        width: 200px;
        height: 200px;
        background: conic-gradient(#399953 0%, #399953 25%,
                                   #fbb300 25%, #fbb300 50%,
                                   #d53e33 50%, #d53e33 75%, 
                                   #377af5 75%, #377af5 100%);
        animation: rotate5 3s linear infinite;
        animation-play-state: paused;
        z-index: -2;
    }
    &:hover::after {
        animation-play-state: running;
    }
    @keyframes rotate5 {
        100% {
            transform: rotate(1turn);
        }
    }
    &::before {
        content: '';
        position: absolute;
        left: 4px;
        right: 4px;
        top: 4px;
        bottom: 4px;
        background: white;
        border-radius: 6px;
        z-index: -1;
    }
    
}

// demo6
.demo6 {
    outline: 1px solid #333;
    outline-offset: -1px;
    &:hover {
        outline: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 50%) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 50%) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 50%) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 50%) repeat-y;
        background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        animation: move .4s infinite linear;
    }
    @keyframes move {
        100% {
            background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
        }
    }
}

// demo7
.demo7 {
	background: linear-gradient(0deg, #f66 2px, #f66 2px) no-repeat left top / 0 2px,
		linear-gradient(90deg, #f66 2px, #f66 2px) no-repeat right top / 2px 0,
		linear-gradient(0deg, #f66 2px, #f66 2px) no-repeat right bottom / 0 2px,
		linear-gradient(90deg, #f66 2px, #f66 2px) no-repeat left bottom / 2px 0;
	transition: all 300ms;
    &:hover {
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    }
}

// demo8
.demo8 {
    &>span {
        position: absolute;
        left: 1px;
        right: 1px;
        top: 1px;
        bottom: 1px;
        background: #252525;
        color: white;
        z-index: 1;
    }
    .demo8_bg {
        position: absolute;
        left: -30px;
        right: -30px;
        top: -30px;
        bottom: -30px;
        background: #000;
        z-index: -3;
    }
    &::before, &::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(70deg, 
            #fb0094,#00f, #0f0, #ff0, #f00,  
            #fb0094, #00f,#0f0, #ff0, #f00, 
            #fb0094, #00f,#0f0, #ff0, #f00, 
            #fb0094, #00f,#0f0, #ff0, #f00, 
            #fb0094, #00f,#0f0, #ff0, #f00);
        background-size: 3000px 100%;
        background-position: 0 0;
        transition: 0.5s;
        animation: animate 15s linear infinite;
        animation-direction: alternate;
        content: "";
        opacity: 0;
        z-index: -1;
    }
    /* &::before {
        display: none;
    } */
    &::after {
        filter: blur(20px);
        z-index: -2;
    }
    &:hover::before,
    &:hover::after {
        opacity: 1;
    }
    
    @keyframes animate {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: right 0;
        }
    }
}

// demo9
.demo9 {
    line-height: 26px;
    border: 15px solid;
    border-image: url(./images/demo9.svg);
    border-image-slice: 32;
    border-image-repeat: round;
    &:hover {
        border-image: url(./images/demo9_active.svg);
        border-image-slice: 32;
        border-image-repeat: round;
    }
}

// demo10
.demo10 {
    overflow: hidden;
    &::after {
        content: "";
        position: absolute;
        top: 3px;
        bottom: 3px;
        right: 3px;
        left: 3px;
        background: #b3e5fb;
        border: 2px solid white;
        z-index: -1;
    }
    &::before {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: -20px;
        left: 0px;
        background: rgba(3, 169, 243, 0.3);
        transform: rotateZ(-90deg) translate(-100%, -100%);
        transform-origin: top left;
        transition: transform .3s;
        transition-timing-function: linear;
        z-index: -2;
    }
    
    &:hover::before {
        transform: rotateZ(0deg) translate(0%, -0%);
    }
}
